<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 500px;
				border: 5px solid red;
				animation: change 10s infinite linear;
				font-size: 36px;
				color: black;
				text-align: center;
			}
			/* 动画:
			step1:创建关键帧 
			@keyframes 动画名称{
			from{}
			to{}
			}
			step2:绑定动画
			animation:动画名称 持续时间 次数；
			infinite：无限次
			linear:匀速
			百分比；时间节点
			*/
			@keyframes change{
				from{/* 开始帧 */
				transform: rotate(0);
				background-color: aqua;
				
				}
				to{/* 结束帧 */
				width: 800px;
				transform:rotate(360deg);
				background-color:gold;
				}
			}
			@keyframes change{
				0%,15%{
					width: 300px;
					height: 200px;
					border: 2px solid deeppink;
				}
				20%,40%{/* 某种状态持续一段时间*/
					transform:rotate(0);
					background-color: antiquewhite;
				}
				44%,65%{
					width: 600px;
					transform:rotate(180deg);
					background-color:bisque;
				}
				70%,95%{
					width:300px;
					height: 300px;
					background-color: aquamarine;
				}
				100%{
					width: 400px;
					height: 400px;
					transform:rotate(360deg);
					background-color: blue;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">动画</div>
	</body>
</html>